<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>融资管理</el-breadcrumb-item>
        <el-breadcrumb-item>融资合同管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!--start 右侧帮助组件    可选！！-->
      <!--<help-components>
                <span slot="headtext">融资质押单列表</span>
                <p slot="headDescText">融资质押单列表</p>
                <div slot="helpContentWrap">
                </div>
            </help-components>-->
      <!--end 右侧帮助组件-->
    </div>
    <!--end  面包屑-->
    <!--start content-->
    <div class="content" ref="content">
      <!-- start 高级搜索 -->
      <div>
        <transition name="fade">
          <div class="modal_backdrop" v-show="vue_advSearch_enable"></div>
        </transition>
        <transition name="fade">
          <div class="specific_search" v-show="vue_advSearch_enable">
            <div class="search_title">
              <p>高级搜索</p>
            </div>
            <!--start 高级搜索的具体项目   可选！！-->
            <div class="finPledgeListF">
              <el-form ref="vue_advSearch" :rules="rules" :model="finPledgeQb" label-width="80px">
                <el-row :gutter="20">
                  <el-col :span="11">
                    <el-form-item label="会员名称">
                      <el-input v-model="finPledgeQb.memberName" placeholder="请输入会员名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="融资编号">
                      <el-input v-model="finPledgeQb.pledgeCode" placeholder="请输入融资编号"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="11">
                    <el-form-item label="仓单质押号">
                      <el-input v-model="finPledgeQb.pledgeGoodsNo" placeholder="请输入仓单质押号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="订单编号">
                      <el-input v-model="finPledgeQb.fromCode" placeholder="请输入订单编号"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="11">
                    <el-form-item label="合同时间" prop="createDate">
                      <el-date-picker type="date" placeholder="选择合同时间"
                                      v-model="finPledgeQb.createDate"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="金融机构">
                      <el-select v-model="finPledgeQb.memberOname" placeholder="请选择金融机构">
                        <el-option v-for="item in financialInstitution"
                                   :key="item.memberOname"
                                   :label="item.brandName"
                                   :value="item.memberOname">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="11">
                    <el-form-item label="还款方式">
                      <el-select v-model="finPledgeQb.repayWay" placeholder="请选择还款方式">
                        <el-option v-for="item in financialInstitution"
                                   :key="item.repayWay"
                                   :label="item.brandName"
                                   :value="item.repayWay">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!--end 高级搜索的具体项目 -->
            <div class="search_btn">
              <el-button @click="advSearch_ok" type="primary">确定</el-button>
              <el-button @click="advSearch_cancel">取消</el-button>
              <el-button @click="advSearch_Clear" type="text">清空</el-button>
            </div>
          </div>
        </transition>
      </div>
      <div class="search_handle " v-if="vue_advSearch_showDialog">
        搜索结果
        <em style="font-style: normal;margin: 0px 20px;">|</em>
        <a @click="advSearch_disable"><em class="iconfont">&#xe66b;</em>清除搜索</a>
        <a @click="advSearch_enable"><em class="iconfont">&#xe62d;</em>继续搜索</a>
      </div>
      <!-- end 高级搜索  -->
      <!-- start 批量操作 -->
      <div class="batch_handle" v-if="vue_row_selectCount>0 && vue_advSearch_showDialog==false">
        <em class="iconfont" @click="row_unselectAll"
            style="margin: 2px 20px;position: relative;top: 2px;cursor: pointer;">&#xe630;</em>
        已选<span>{{vue_row_selectCount}}</span>项<em style="font-style: normal;margin: 0px 20px;">|</em>
        <a @click="batchApply"><em class="iconfont">&#xe767;</em>&nbsp;批量提交</a>
        <a @click="batchAuditPass"><em class="iconfont">&#xe767;</em>&nbsp;批量监管审核通过</a>
        <a @click="batchAuditNotPass"><em class="iconfont">&#xe767;</em>&nbsp;批量监管审核不通过</a>
        <a @click="batchPlatformPass"><em class="iconfont">&#xe767;</em>&nbsp;批量平台审核通过</a>
        <a @click="batchPlatformNotPass"><em class="iconfont">&#xe767;</em>&nbsp;批量平台审核不通过</a>
        <a @click="batchFinPass"><em class="iconfont">&#xe767;</em>&nbsp;批量金融机构审核通过</a>
        <a @click="batchFinNotPass"><em class="iconfont">&#xe767;</em>&nbsp;批量金融机构审核不通过</a>
        <!-- add more row action button -->
        <a @click="batchDelete"><em class="iconfont">&#xe616;</em>&nbsp;批量删除</a>
      </div>
      <!--end 批量操作-->
      <!--start 普通搜索-->
      <div class="public_th clearfix" v-if="vue_row_selectCount==0">
        <div class="slideBtn fl">
          <el-select v-model="ddlistKey" @change="handleCommand" placeholder="融资类型">
            <el-option label="融资类型" value="">
              <span style="font-size:12px ;">融资类型</span>
            </el-option>
            <el-option v-for="item in options"
                       :key="item.ddlistKey"
                       :label="item.ddlistName"
                       :value="item.ddlistKey">
            </el-option>
          </el-select>
        </div>
        <div class="slideBtn fl">
          <el-select v-model="ddlistKey" @change="handleCommand" placeholder="融资状态">
            <el-option label="融资状态" value="">
              <span style="font-size:12px ;">融资状态</span>
            </el-option>
            <el-option v-for="item in options"
                       :key="item.ddlistKey"
                       :label="item.ddlistName"
                       :value="item.ddlistKey">
            </el-option>
          </el-select>
        </div>
        <div class="public_th_left fl">
          <div class="fl">
            <div class="search_input">
              <input @keydown.enter="generalSearch_ok" type="text" v-model="finPledgeQb.fullTextFilterStr"
                     placeholder="请输入融资编号/仓单质押号/订单编号"/><i @click="generalSearch_ok"></i>
            </div>
          </div>
          <span class="fl search_openBtn" @click="advSearch_showDialog">高级搜索</span>
        </div>
        <div class="public_th_right fr">
          <!--<a>导入</a>
                    <a>导出</a>-->
          <!--<router-link to="/finPledgeAdd" style="background: #13c19f;color: #fff;border: 0;">新增</router-link>-->
        </div>
      </div>
      <!--end 普通搜索-->
      <!--start 表格-->
      <div class="table contentBodyCon content_table_list" :class="{beforeNone:finPledgeSet.list.length!='0'}">
        <el-table ref="finPledgeRows" :data="finPledgeSet.list" style="width: 100%;  z-index: 10;"
                  :max-height="vue_tableHeight" @selection-change="row_select">
          <!--<el-table-column type="selection" width="60"></el-table-column>-->
          <!--<el-table-column prop="pledgeCode" label="业务代码" sortable>-->
          <!--start 可点击的项  可选！！-->
          <!--<template scope="scope">-->
          <!--<span class="canClickText" @click="row_goDetail(scope.row)" v-html="scope.row.pledgeCode"></span>-->
          <!--</template>-->
          <!--end 可点击的项-->
          <!--</el-table-column>-->
          <el-table-column width="120" prop="pledgeCode " label="融资编号"></el-table-column>
          <el-table-column width="120" prop="memberName" label="会员名称"></el-table-column>
          <el-table-column width="120" prop="memberCode" label="会员编号"></el-table-column>
          <el-table-column width="120" prop="pledgeType" label="融资类型"></el-table-column>
          <el-table-column width="120" prop="memberOname" label="金融机构"></el-table-column>
          <el-table-column width="120" prop="pledgeGoodsNo " label="仓单质押号"></el-table-column>
          <el-table-column width="120" prop="fromCode" label="订单编号"></el-table-column>
          <el-table-column width="160" prop="createDate" label="合同日期"></el-table-column>
          <el-table-column width="120" prop="pledgeTimeLimit" label="融资期限(元)"></el-table-column>
          <el-table-column width="120" prop="pledgeActuralMoney" label="融资金额(元)"></el-table-column>
          <el-table-column width="120" prop="pledgeRate" label="利率%"></el-table-column>
          <el-table-column width="120" prop="repayWay" label="还款方式"></el-table-column>
          <el-table-column width="120" prop="dataBillstate" label="融资状态"></el-table-column>
          <!-- add more column header -->

          <!--<el-table-column prop="" label="" fixed="right" width="60" >-->
          <!--<template scope="scope">-->
          <!--<el-popover trigger="hover" placement="bottom">-->
          <!--<p class="popover_p" style="cursor: pointer;" @click="row_goUpdate(scope.row)">-->
          <!--<em class="iconfont">&#xe617;</em>平台审核-->
          <!--</p>-->
          <!--<div slot="reference" style="text-align: center;">-->
          <!--<em class="iconfont tab_hover">&#xe607;</em>-->
          <!--</div>-->
          <!--</el-popover>-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </div>
      <!--end 表格-->
      <div class="block fr">
        <el-pagination
          @size-change="page_onPageSizeChange"
          @current-change="page_onCurPageChange"
          :current-page="parseInt(finPledgeSet.pageTools.pageNo)"
          :page-sizes="finPledgeSet.pageTools.pageSizeOptions"
          :page-size="parseInt(finPledgeSet.pageTools.pageSize)"
          :total="parseInt(finPledgeSet.pageTools.recordCount)"
          layout="total, prev, pager, next, sizes,jumper">
        </el-pagination>
      </div>
    </div>
    <!--end content-->
  </section>
</template>

<script>
  /*
   1.引入的组件、文件等，优先写在顶部。
   2.组件的选项编写顺序按照先string再obj再function，详细如下：
   1):el=>name=>template
   2):components=>watch=>filters=>computed=>props=>directives=>propsData=>parent=>mixins=>delimiters=>functional=>methods
   3):render=>data=>extends=>生命周期钩子
   * */
  import helpComponents from '../../../../components/help/help'    //引入右侧帮助组件 可选！！
  export default {
    components: {helpComponents},
    data() {
      return {
        /* start 全局变量定义 */
        vue_advSearch_showDialog: false,  //是否启用高级搜索功能
        vue_advSearch_enable: false,  //是否显示高级搜索窗口
        vue_tableHeight: 500,  //表格高度
        vue_row_selectCount: 0,  //选择的row数
        vue_row_pledgeCodeStr: "",  //选中的row
        ddlistKey: "",
        options: [],
        financialInstitution: "",
        //table数据
        finPledgeSet: {
          "list": [],  //数据列表
          "page": {},	//分页数据
          "sumInfo": {}, //汇总信息
        },
        /*--查询条件--*/
        finPledgeQb: {
          "dataBillstate": "",  //客户状态
          "fullTextFilterStr": "",  //查询关键词
          "memberName": "",  //会员名称
          "pledgeCode": "",  //融资编号
          "pledgeGoodsNo": "",  //仓单质押号
          "fromCode": "",   //订单编号
          "createDate": "",  //申请日期
          "memberOname": "",  //金融机构
          "repayWay": "",   //还款方式
        },
        rules: {
          memberName: [
            {required: false, message: '请输入会员名称', trigger: 'blur'},
          ],
        },

        /* end 全局变量定义 */
      }
    },
    methods: {
      /* start 页面交互方法 */
      //清空高级搜索
      advSearch_Clear(){
        this.$refs.vue_advSearch.resetFields();
        /* start 重置高级搜索条件 */
        this.finPledgeQb.memberName = "";  //会员名称
        this.finPledgeQb.pledgeCode = "";   //融资编号
        this.finPledgeQb.pledgeGoodsNo = "";  //仓单质押号
        this.finPledgeQb.fromCode = "";   //订单编号
        this.finPledgeQb.createDate = "";  //申请日期
        this.finPledgeQb.memberOname = "";   //金融机构
        this.finPledgeQb.repayWay = "";   //还款方式
        /* end 重置高级搜索条件 */
      },
      handleCommand(){

      },
      //选择row
      row_select(val) {
        this.vue_row_selectCount = val.length;
        this.vue_row_pledgeCodeStr = "";
        val.forEach((item, index, arr) => {
          this.vue_row_pledgeCodeStr += item.pledgeCode + ","
        });
        this.vue_row_pledgeCodeStr = this.vue_row_pledgeCodeStr.substring(0, this.vue_row_pledgeCodeStr.length - 1);
        if (this.vue_row_selectCount != 0) {
          this.vue_advSearch_showDialog = false
        }
      },
      //取消选择
      row_unselectAll(){
        this.vue_row_selectCount = 0;
        this.vue_row_pledgeCodeStr = "";
        this.$refs.finPledgeRows.clearSelection();
      },
      //跳转编辑
      row_goUpdate(data){
        localStorage.setItem("pledgeCode", data.pledgeCode);
//        this.$router.push({path:"/finPledgeUpdate"});
      },
      //查看详情
      row_goDetail(data){
        localStorage.setItem("pledgeCode", data.pledgeCode);
        this.$router.push({path: "/finPledgeDetail"});
      },
      //普通搜索 关键字
      generalSearch_ok(){
        this.finPledgeSet.pageTools.pageNo = 1;
        this.queryByPage();
      },
      //是否显示高级搜索窗口
      advSearch_showDialog(){
        this.vue_advSearch_enable = true;
        this.finPledgeQb.old_fullTextFilterStr = this.finPledgeQb.fullTextFilterStr;
        this.finPledgeQb.old_dataBillstate = this.finPledgeQb.dataBillstate;
      },
      //高级搜索窗口确定
      advSearch_ok() {
        this.vue_advSearch_enable = false;
        this.vue_advSearch_showDialog = true;
        this.vue_row_selectCount = 8888;
        this.queryByPage();
      },
      //清除搜索
      advSearch_disable(){
        this.finPledgeQb.fullTextFilterStr = '';
        this.finPledgeQb.dataBillstate = '';
        this.finPledgeSet.pageTools.pageNo = 1;
        this.vue_advSearch_showDialog = false;
        this.vue_row_selectCount = 0;
        this.queryByPage();
      },
      //继续搜索
      advSearch_enable(){
        this.vue_advSearch_enable = true;
        this.vue_advSearch_showDialog = false;
      },
      //高级搜索窗口取消
      advSearch_cancel() {
        this.$refs.vue_advSearch.resetFields();
        this.vue_advSearch_enable = false;
        this.vue_advSearch_showDialog = false;
        this.vue_row_selectCount = 0;
        this.finPledgeQb.fullTextFilterStr = this.finPledgeQb.old_fullTextFilterStr;
        this.finPledgeQb.dataBillstate = this.finPledgeQb.old_dataBillstate;
      },
      //查table数据
      queryByPage(){
        this.axios({
          method: 'post',
          url: "/v3/fin/pledges/list",
          data: {
            "finPledgeQb.offset": (this.finPledgeSet.pageTools.pageNo - 1) * this.finPledgeSet.pageTools.pageSize,
            "finPledgeQb.limit": this.finPledgeSet.pageTools.pageSize,
            "finPledgeQb.fullTextFilterStr": this.finPledgeQb.fullTextFilterStr,
            "finPledgeQb.dataBillstate": this.finPledgeQb.dataBillstate
          }
        }).then((res) => {
          this.finPledgeSet.list = res.data.list;
          this.finPledgeSet.pageTools = res.data.pageTools;
          this.finPledgeSet.sumInfo = res.data.sumInfo;

          //后台要返回这个选项
          this.finPledgeSet.pageTools.pageSizeOptions = [10, 20, 30];
        }).catch((err) => {
          this.Public.openError(this, err.response.data);
        });
      },
      //pageSize每页条数变化时的fn
      page_onPageSizeChange(val) {
        this.finPledgeSet.pageTools.pageSize = val;
        this.queryByPage();
      },
      //pageNo当前页码变化时的fn
      page_onCurPageChange(val) {
        this.finPledgeSet.pageTools.pageNo = val;
        this.queryByPage();
      },
      //批量提交
      batchApply(){
        this.$confirm('请确认是否批量提交？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchApply",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      //批量监管审核通过
      batchAuditPass(){
        this.$confirm('请确认是否批量监管审核通过？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchAuditPass",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      //批量监管审核不通过
      batchAuditNotPass(){
        this.$confirm('请确认是否批量监管审核不通过？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchAuditNotPass",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      //批量平台审核通过
      batchPlatformPass(){
        this.$confirm('请确认是否批量平台审核通过？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchPlatformPass",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      //批量平台审核不通过
      batchPlatformNotPass(){
        this.$confirm('请确认是否批量平台审核不通过？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchPlatformNotPass",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      //批量金融机构审核通过
      batchFinPass(){
        this.$confirm('请确认是否批量金融机构审核通过？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchFinPass",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      //批量金融机构审核不通过
      batchFinNotPass(){
        this.$confirm('请确认是否批量金融机构审核不通过？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'patch',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr + "/batchFinNotPass",
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {

        });
      },
      /* add more row action function */
      //批量删除
      batchDelete() {
        this.$confirm('请确认是否批量删除？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
          customClass: "clearfixBox"
        }).then(() => {
          this.axios({
            method: 'delete',
            url: "/v3/fin/pledges/" + this.vue_row_pledgeCodeStr,
            data: {}
          }).then((res) => {
            this.vue_row_selectCount = 0;
            this.vue_row_pledgeCodeStr = "";
            this.Public.openSuccess(this,"操作成功！");
            this.queryByPage();
          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        }).catch(() => {
          //取消
        });
      },
      /* end 页面交互方法 */
    },
    created(){
      this.finPledgeSet.pageTools = this.$store.state.page;
      //请求客户列表
      this.queryByPage();

    },
    mounted() {
      //动态设置高度
      this.$refs.content.style.height = (document.documentElement.clientHeight - 124) + "px";
      this.vue_tableHeight = document.documentElement.clientHeight - 240;
    },
  }
</script>

<style scoped>
  /* start  面包屑 */
  .location {
    padding: 3px 0 15px 0;
  }

  /* end  面包屑 */
  /* start content */
  .content {
    position: relative;
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
  }

  /* start 高级搜索 */
  .modal_backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
  }

  .specific_search {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
  }

  .search_title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px
  }

  .form {
    width: 450px;
    margin: 20px 0;
    background: #fff;
    text-align: right;
  }

  .form li {
    margin-top: 15px;
  }

  .form input {
    width: 350px;
    height: 32px;
    border: 0;
  }

  .form div {
    display: inline-block;
    position: relative;
    width: 358px;
    height: 34px;
    border-radius: 4px;
    text-indent: 5px;
    margin-left: 12px;
  }

  .form li:first-child div {
    border: 1px solid rgb(191, 212, 217);
  }

  .form li:first-child div input {
    border-radius: 4px;
  }

  .search_btn {
    margin-top: 70px;
  }

  .search_handle {
    margin-left: -6px;
    height: 36px;
    line-height: 36px;
  }

  .search_handle em {
    font-size: 14px;
  }

  .search_handle a {
    margin-right: 20px;
    cursor: pointer;
    color: #768696;
  }

  .search_handle a:hover {
    color: #03B8CC;
  }

  .search_handle {
    margin-left: 10px;
  }

  /* end 高级搜索 */
  /* start 批量操作 */
  .batch_handle {
    margin-left: -6px;
    height: 36px;
    line-height: 36px;
  }

  .batch_handle em {
    font-size: 14px;
  }

  .batch_handle a {
    margin-right: 20px;
    cursor: pointer;
    color: #768696;
  }

  .batch_handle a:hover {
    color: #03B8CC;
  }

  /* end 批量操作 */
  /* start 普通搜索 */
  .public_th {
    position: relative;
    min-width: 750px;
    z-index: 100;
  }

  .public_th_left span.search_openBtn {
    display: block;
    position: relative;
    height: 36px;
    margin-right: 10px;
    padding-right: 0px;
    line-height: 36px;
    color: #93a6b7;
    z-index: 100;
    cursor: pointer;
  }

  .slideBtn {
    line-height: 36px;
    margin-right: 26px;
  }

  .slideBtn > div > span {
    display: block;
    cursor: pointer;
  }

  .search_input input {
    display: block;
    float: left;
    width: 400px;
    height: 34px;
    font-size: 12px;
    border: 0;
    margin-left: 20px;
  }

  .search_input {
    float: left;
    width: 450px;
    border: 1px solid #cdd9e6;
    border-radius: 30px;
    margin-right: 10px;
    cursor: pointer;
  }

  .search_input:hover {
    border-color: #13C19F;
    transition: 1s;
  }

  .search_input i {
    background: url('../../../../img/sousuo.png') no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
    position: relative;
    top: 7px;
    right: 5px;
    cursor: pointer;
  }

  .public_th_right a {
    display: block;
    float: left;
    width: 80px;
    height: 32px;
    margin-left: 10px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    line-height: 32px;
    border-radius: 30px;
    border: 1px solid #cdd9e6;
    cursor: pointer;
  }

  /* end 普通搜索 */
  /* start 表格 */
  .table {
    margin-top: 15px;
  }

  .table th {
    height: 50px;
  }

  .el-table th > .cell {
    width: 100%;
    word-wrap: normal;
    text-overflow: ellipsis;
    line-height: 20px;
    box-sizing: border-box;
    font-weight: normal !important;
    font-size: 14px;
  }

  .el-table {
    font-size: 12px !important;
    font-weight: normal !important;
  }

  .el-table--fit {
    border-left: 0;
  }

  .popover_p {
    text-indent: 10px;
    line-height: 30px;
  }

  .popover_p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .popover_p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .tab_hover {
    color: #b7c6d6;
    cursor: pointer;
  }

  .canClickText {
    cursor: pointer;
    color: #03B8CC;
    text-decoration: underline;
  }

  /* end 表格 */
  /* start page */
  .block {
    margin: 15px;
  }

  /* end page */
  /* end content */
  /* start transition */
  .fade-enter, .fade-leave-active {
    opacity: 0
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  /* end transition */
</style>
